<template>
	<scroll-view class="scroll-container" scroll-y enhanced show-scrollbar="false">
		<view class="container">

		
			<view class="blank-box box-1" style="padding: 0; position: relative;">
				<view class="Atitle">泉州风光</view>
				<swiper class="swiper-container" autoplay interval="3000" circular indicator-dots>
					<swiper-item><image class="swiper-image" src="/static/city5.jpg" mode="widthFix"></image></swiper-item>
					<swiper-item><image class="swiper-image" src="/static/city4.jpg" mode="widthFix"></image></swiper-item>
					<swiper-item><image class="swiper-image" src="/static/city2.jpg" mode="widthFix"></image></swiper-item>
				</swiper>
			</view>

		
			<view class="blank-box box-2" style="position: relative;">
				<view class="Atitle">泉州介绍</view>
				<rich-text :nodes="cityIntro"
					style="display: block; padding-top: 70rpx; padding-left: 3rpx; padding-right:3rpx;"></rich-text>
			</view>

		
			<view class="blank-box box-3" style="position: relative;">
				<view class="Atitle">探索进度</view>
				<view style="margin-top:60rpx; font-size: 14px; color: #333;">探索进度：70%</view>
				<progress percent="70" stroke-width="6" show-info active color="#0055ff"
					style="margin-top:5rpx;"></progress>
			</view>

		
			<view class="blank-box box-4" style="position: relative;">
				<view class="Atitle">选择城市</view>
				<picker mode="district" :value="region" @change="onRegionChange" style="margin-top: 50rpx;">
					<view class="picker" style="font-size: 30rpx; color: #333;">
						当前选择：{{ region[0] }}-{{ region[1] }}-{{ region[2] }}
					</view>
				</picker>
			</view>

			
			<view class="blank-box box-5" style="position: relative; height: auto; padding-bottom: 30rpx;">
				<view class="Atitle">偏好设置</view>

				<view style="margin-top: 70rpx; padding-left: 10rpx;">
					<view style="font-size: 16px; color: #333; margin-bottom: 20rpx;">出行方式</view>
					<radio-group @change="onTransportChange" style="display: flex; gap: 40rpx;">
						<view v-for="item in transports" :key="item.value"
							style="display: flex; align-items: center; gap: 5rpx; font-size: 12px; color: #666;">
							<radio :value="item.value" :checked="selectedTransport === item.value" color="#0055ff" />{{ item.label }}
						</view>
					</radio-group>
				</view>

				<view
					style="margin-top: 40rpx; padding-left: 10rpx; display: flex; justify-content: space-between; align-items: center;">
					<view style="font-size: 16px; color: #333;">显示推荐景点</view>
					<switch :checked="showAttractions" @change="onShowAttractionsChange" color="#0055ff"
						style="transform: scale(0.8); margin-right: 300rpx;" />
				</view>

				<view style="margin-top: 40rpx; padding-left: 10rpx; padding-right: 10rpx;">
					<view style="font-size: 16px; color: #333; margin-bottom: 10rpx;">探索半径：{{ radius }} km</view>
					<slider :value="radius" min="1" max="20" step="1" activeColor="#0055ff" backgroundColor="#e5e6eb"
						style="height: 8rpx;" @change="onRadiusChange" />
				</view>
			</view>

	
			<view class="blank-box box-6" style="position: relative; height: auto; padding: 20rpx;">
				<view class="Atitle">泉州宣传</view>
				<video class="city-video" src="/static/city-video.mp4"
					style="width: 100%; margin-top: 50rpx; aspect-ratio: 4/3; border-radius: 8rpx;" controls
					poster="/static/videofen.jpg" />
			</view>

		
			<view class="blank-box box-7" style="position: relative; height: auto; padding: 30rpx;">
				<view class="Atitle">泉州背景音乐</view>
				<view class="music-card">
				
					<button class="play-btn" @click="toggleMusic">{{ isPlaying ? '暂停' : '播放' }}</button>
					<view class="music-info">泉州南音 - 泉州传统乐团</view>
				
					<progress :percent="musicProgress" stroke-width="8" active color="#0055ff"
						style="width: 80%; margin-top: 20rpx;" />
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				cityIntro: [
					{
						name: "p",
						attrs: { style: "margin-bottom:3px; font-weight: bold; font-size: 14px; color: #000000;" },
						children: [{ type: "text", text: "历史文化名城" }]
					},
					{
						name: "p",
						attrs: { style: "margin-bottom: 10rpx; line-height: 1.6; font-size: 10px; color: #333;" },
						children: [{ type: "text", text: "泉州是福建省辖地级市，地处福建省东南部，是福建省三大中心城市之一。" }]
					},
					{
						name: "p",
						attrs: { style: "margin-bottom: 15rpx; line-height: 1.6; font-size: 10px; color: #333;" },
						children: [
							{ type: "text", text: "泉州历史悠久，是古代海上丝绸之路的重要节点，宋元时期刺桐港被誉为" },
							{ name: "span", attrs: { style: "color: #0066cc; font-weight: bold;" }, children: [{ type: "text", text: "东方第一大港" }] },
							{ type: "text", text: "。" }
						]
					},
					{
						name: "p",
						attrs: { style: "line-height: 1.6; font-size: 10px; color: #333;" },
						children: [
							{ type: "text", text: "泉州是国务院首批公布的" },
							{ name: "span", attrs: { style: "color: #0066cc; font-weight: bold;" }, children: [{ type: "text", text: "历史文化名城" }] },
							{ type: "text", text: "之一，也是首届东亚文化之都。" }
						]
					}
				],
				region: ['福建省', '泉州市', '洛江区'],
				transports: [
					{ label: '公交', value: 'bus' },
					{ label: '自驾', value: 'selfDrive' },
					{ label: '步行', value: 'walk' }
				],
				selectedTransport: "bus", 
				showAttractions: true,  
				radius: 1,
				isPlaying: false,
				musicProgress: 0,
				audioCtx: null,
				musicUrl: '/static/city-music.mp3',
				timer: null
			};
		},
		methods: {
			onRegionChange(e) {
				this.region = e.detail.value;
			},
			onRadiusChange(e) {
				this.radius = e.detail.value;
			},
			onTransportChange(e) {
				this.selectedTransport = e.detail.value;
			},
			onShowAttractionsChange(e) {
				this.showAttractions = e.detail.value;
			},
			
			toggleMusic() {
				if (!this.audioCtx) {
					this.initAudio();
				}
				if (this.isPlaying) {
					clearInterval(this.timer);
					this.audioCtx.pause();
				} else {
					this.audioCtx.play();
					this.startProgressUpdate();
				}
				this.isPlaying = !this.isPlaying;
			},
			initAudio() {
				this.audioCtx = uni.createInnerAudioContext();
				this.audioCtx.src = this.musicUrl;
				this.audioCtx.obeyMuteSwitch = false;

				this.audioCtx.onEnded(() => {
					this.isPlaying = false;
					this.musicProgress = 0;
					clearInterval(this.timer);
				});
			},
		
			startProgressUpdate() {
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					if (this.audioCtx && this.audioCtx.duration > 0) {
						const newProgress = (this.audioCtx.currentTime / this.audioCtx.duration) * 100;
						if (Math.abs(newProgress - this.musicProgress) > 1) {
							this.musicProgress = newProgress;
						}
					}
				}, 500);
			}
		},
		onUnload() {
			if (this.audioCtx) {
				this.audioCtx.destroy();
			}
			if (this.timer) clearInterval(this.timer);
		}
	};
</script>

<style>
	.scroll-container {
		width: 100%;
		height: 100vh;
		background-color: #f5f7fa;
	}
	.container {
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	.blank-box {
		width: 100%;
		background-color: #ffffff;
		border: 1px solid #e5e6eb;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 12rpx;
	}
	.Atitle {
		position: absolute;
		top: 10rpx;
		left: 15rpx;
		font-size: 38rpx;
		font-weight: bold;
		color: #000000;
		z-index: 10;
		text-shadow: 0 0 2rpx #fff, 0 0 2rpx #fff;
	}
	.music-card {
		margin-top: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
	}
	.music-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.play-btn {
		background-color: #0055ff;
		color: #fff;
		border: none;
		border-radius: 12rpx;
		padding: 15rpx 60rpx;
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	.music-info {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
</style>